<script setup>
import { getClusterListHandler as getListHandler,deleteClusterHandler as delteHandler, getClusterHandler as getDetail } from '../../api/cluster.js'
import { ElMessage,ElMessageBox  } from 'element-plus'
import {onBeforeMount, reactive, toRefs, ref } from "vue";
import Add from './Add.vue'
import {Check, Close} from "@element-plus/icons-vue";

// loading 为true是 是加载状态，在数据加载成功后，把 loading.value设置成false 停止转圈
const loading = ref(true)
const addUserDialog =ref(false)
const  data = reactive({
   items: [],
  itemForm:{
    id: "",
    displayName:"",
    city:"",
    district:"",
    kubeconfig: ""
  }
})
const defaultMethod=ref("Create")

// 获取集群列表
// 使用api/user.js中封装好的方法 axios 获取后端接口数据
const getList = ()=>{
  loading.value =true
  console.log("集群列表中打印response")
  getListHandler().then((response)=>{
    console.log("集群列表中打印response",response.data.data.list)
    data.items = response.data.data.items
    console.log("打印items",data.items)
    loading.value =false
  })
}
// 使用vue组件生命周期，在组件被挂载之前执行动作
onBeforeMount(()=>{
  getList()
})

// 删除用户的方法
const deleteItem = (row)=>{
  console.log("当前行的数据:",row)
    ElMessageBox.confirm(
        '你确定要删除集群：' + row.id,
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
            loading.value =true
            delteHandler(row.id)
                .then((response)=>{
                  ElMessage({
                    message: "删除成功",
                    type: 'success',
                  })
                  // 删除一个信息后自动刷新一下列表
                  getList()
              loading.value =false
            })
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
    })
}

// 添加集群
const add=()=>{
  data.itemForm = {}
  defaultMethod.value= "Create"
  addUserDialog.value=true
}
// 编辑用户
const edit=(id)=>{
  loading.value=true
  // 1. 获取当前想要编辑的集群id
  console.log("编辑的集群id:",id)
  // 2. 调用后端接口，使用集群id获取集群详情
  getDetail(id).then((response)=>{
    // 3. 查询到数据以后把数据赋值给itemForm
    console.log("集群列表中打印response",response.data.data.item)
    data.itemForm = response.data.data.item
    // 4. 编辑的弹窗dialog给打开
    defaultMethod.value= "Edit"
    addUserDialog.value=true
    loading.value=false
  })
}

// 解构data中的items数组
const {items,itemForm} = toRefs(data)
const getListAddDialog = ()=>{
  //getUserList()
  addUserDialog.value=false
}
const closeDialog=()=>{
  // 关闭添加程序的窗口时 更新数据
  getList()
}
const rollback =()=>{
  addUserDialog.value=false
  getList()
}


</script>

<template>
  <el-card  element-loading-text="玩命加载中..." class="box-card">
    <template #header>
      <div class="card-header">
        <span>集群列表</span>
        <el-button class="button"  @click="add()" type="primary">添加集群</el-button>
      </div>
    </template>
    <!--  放真实数据的地方  -->
    <el-table
        border
        height="480"
        :data="items"
        style="width: 100%"
    >
      <!--  align="center" 表格中居中  sortable 排序    -->
      <el-table-column fixed  prop="" align="center"  label="集群ID" width="200" >
      <!--   router-link 实现在点击集群id的时候路径跳转     -->
        <template #default="scope">
          <router-link v-if="scope.row.status === 'Active'"  :to="{path: '/api/cluster/detail', query: {'clusterId': scope.row.id}}">{{ scope.row.id }}</router-link>
          <span v-else style="color: red">{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="displayName" align="center"  label="集群别名" width="200" />
      <el-table-column prop="version" align="center"  label="版本" width="200" sortable />
      <el-table-column prop="" align="center"  label="位置" width="200" >
        <template #default="scope">
          {{ scope.row.city }} - {{scope.row.district}}
        </template>
      </el-table-column>
      <el-table-column prop="" align="center"  label="状态" width="200" sortable >
        <template #default="scope">
          <el-icon v-if ="scope.row.status === 'Active'" color="green"><Check /></el-icon>
          <el-icon v-else color="red"><Close /></el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="version" align="center"  label="集群规模" width="200" />
      <el-table-column fixed="right" align="center"  label="操作" >
        <!--  插槽的 scope 可以绑定行的数据  scope.row 获取一行的数据    -->
        <template #default="scope">
          <el-button :disabled="scope.row.status !=='Active'" link type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button link type="warning" size="small" @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 尾部的布局 -->
      <div class="auto-space-between" style="margin-top: 15px">
        <!--      // 批量操作-->
        <div></div>
        <!--      // 统计总数-->
        <div>总数: {{ items.length }}</div>
      </div>
  </el-card>
  <el-dialog

      destroy-on-close
      @close="closeDialog()"
      v-model="addUserDialog"
      :title=" defaultMethod === 'Create'?'添加集群':'更新集群' "
      width="70%" >
    <Add :item-form="itemForm" :method="defaultMethod"  @rollback="rollback()"></Add>
  </el-dialog>
</template>

<style scoped>
.card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>